﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>微信</title>
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/module/admin.css?v=318">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .pagebody {
            margin: 10px;
            padding: 10px;
            background-color: white
        }

        /* 用户信息 */
        .user-info-head {
            width: 110px;
            height: 110px;
            line-height: 110px;
            position: relative;
            display: inline-block;
            border: 2px solid #eee;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            margin: 0 auto;
        }

            .user-info-head:hover:after {
                content: '\e681';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                color: #fff;
                background-color: rgba(0, 0, 0, 0.3);
                font-size: 28px;
                padding-top: 2px;
                font-style: normal;
                font-family: layui-icon;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            .user-info-head img {
                width: 110px;
                height: 110px;
            }


        #userInfo{display:none}
    </style>
</head>
<body>
    <div class="pagebody">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-xs6 layui-col-xs-offset3" id="userInfo">
                <div class="text-center layui-text">
                    <div class="user-info-head" id="userInfoHead">
                        <img src="" alt="" id="PortraitImg" />
                    </div>
                    <p style="padding-top: 8px;" id="UserName"></p>
                    <p style="padding-top: 8px;" id="Adress"></p>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-xs-offset3">
                <button type="button" class="layui-btn layui-btn-fluid" id="getUserInfoBtn">获取用户信息</button>
            </div>
            <div class="layui-col-xs6 layui-col-xs-offset3">
                <button type="button" class="layui-btn layui-btn-fluid" id="scanQRCodeBtn">微信扫一扫</button>
            </div>
        </div>
    </div>

    <!-- 初始加载动画 -->
    <div class="page-loading">
        <div class="signal-loader">
            <span></span><span></span><span></span><span></span>
        </div>
    </div>

    <!-- js部分 -->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="/assets/libs/layui/layui.js"></script>
    <script>
        layui.config({ base: '/assets/module/' }).use(['layer', 'form', 'setter', 'admin'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var setter = layui.setter;
            var admin = layui.admin;

            var sdkUiPackage;

            admin.req('/WeixinMP/GetJsSdkUiPackage', function (d) {

                if (d.Tag != 1) {
                    layer.msg(d.Message, { icon: 2 });
                    return;
                }

                sdkUiPackage = d.Data;

                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: d.Data.AppId, // 必填，公众号的唯一标识
                    timestamp: parseInt(d.Data.Timestamp), // 必填，生成签名的时间戳
                    nonceStr: d.Data.NonceStr, // 必填，生成签名的随机串
                    signature: d.Data.Signature,// 必填，签名
                    jsApiList: ['checkJsApi',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone',
                        'hideMenuItems',
                        'showMenuItems',
                        'hideAllNonBaseMenuItem',
                        'showAllNonBaseMenuItem',
                        'translateVoice',
                        'startRecord',
                        'stopRecord',
                        'onVoiceRecordEnd',
                        'playVoice',
                        'onVoicePlayEnd',
                        'pauseVoice',
                        'stopVoice',
                        'uploadVoice',
                        'downloadVoice',
                        'chooseImage',
                        'previewImage',
                        'uploadImage',
                        'downloadImage',
                        'getNetworkType',
                        'openLocation',
                        'getLocation',
                        'hideOptionMenu',
                        'showOptionMenu',
                        'closeWindow',
                        'scanQRCode',
                        'chooseWXPay',
                        'openProductSpecificView',
                        'addCard',
                        'chooseCard',
                        'openCard'] // 必填，需要使用的JS接口列表
                });
            });

            wx.ready(function () {
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                admin.removeLoading();

                init();
            });

            wx.error(function (res) {
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                var msg = "微信初始化失败了：" + JSON.stringify(res);
                layer.alert(msg, { icon: 2, time: false });
            });

            // 扫一扫按钮
            $('#scanQRCodeBtn').click(function () {
                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function (res) {
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        layer.msg("扫码成功：" + result);
                    }
                });
            });
            // 获取用户信息
            $('#getUserInfoBtn').click(function () {
                window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='
                    + sdkUiPackage.AppId
                    + '&redirect_uri='
                    + 'http://pubpaperstest.zhyinfo.cn/weixin/weixinUserInfo.html'
                    + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
            });

            // 如果缓存里有数据，就请求用户信息
            function init() {
                
                var weixin_user_code = admin.getTempData('weixin_user_code', true);
                if (weixin_user_code && weixin_user_code.length > 0) {

                    admin.req('/WeixinMP/GetUserInfo/' + weixin_user_code, function (d) {

                        if (d.Tag != 1) {
                            layer.msg(d.Message, { icon: 2 });
                            return;
                        }

                        // 用户信息
                        $('#PortraitImg').attr("src", d.Data.headimgurl);
                        $('#UserName').html(d.Data.nickname);
                        $('#Adress').html(d.Data.country + ' - ' + d.Data.province + ' - '+ d.Data.city);

                        $('#userInfo').show();
                    });
                    admin.putTempData('weixin_user_code', null, true);
                }
            }
        });
    </script>
</body>
</html>